<?php
use lvzmen\yii\cms\widgets\markdown\Markdown;
use lvzmen\yii\cms\widgets\markdown\Example;
use yii\bootstrap\Dropdown;
use yii\bootstrap\Carousel;
use yii\bootstrap\Button;

$html = [
    "markdown0" => <<<M0
## 下拉列表
`Dropdown`小部件并无法直接实现表单`input`的下拉选择功能，`Dropdown::widget()`输出的结果也只是`<ul>`列表而已，如果需要实现下拉的效果，需要在其父元素上实现`.dropdown`类，示例如下：
M0,
    "example0" => [
        "html" =>
            '<div class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>'.
            Dropdown::widget([
                'items' => [
                    ['label' => 'DropdownA', 'url' => '#'],
                    ['label' => 'DropdownB', 'url' => '#'],
                ],
            ])
        .'</div>'
        ,
        "yii" => <<<EY0
use yii\bootstrap\Dropdown;
//包含一个有.dropdown类的父类
echo '<div class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>';
echo Dropdown::widget([
    'items' => [
        ['label' => 'DropdownA', 'url' => '#'],
        ['label' => 'DropdownB', 'url' => '#'],
    ],
]);
echo '</div>';
EY0,
        "bootstrap" => <<<EB0
<div class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
        Label <b class="caret"></b>
    </a>
    <ul id="w0" class="dropdown-menu">
        <li>
            <a href="#" tabindex="-1">
                DropdownA
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownB
            </a>
        </li>
    </ul>
</div>
EB0
    ],
    "markdown1" => <<<M0
> 注意：下拉列表框只是列表，并非`select`控件，因此不能当作表单的下拉选择控件来用，比较适合的场所是侧边栏和导航栏；  

## 分组
`bootstrap`给下拉列表设置了分组功能，示例如下：
M0
    ,

    "example1" => [
        "html" =>
            '<div class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>'.
            Dropdown::widget([
                'items' => [
                    '<li class="dropdown-header">Group A</li>',
                    ['label' => 'DropdownA', 'url' => '#', ],
                    ['label' => 'DropdownB', 'url' => '#'],
                    ['label' => 'Group B'],
                    ['label' => 'DropdownC', 'url' => '#', ],
                    ['label' => 'DropdownD', 'url' => '#'],
                ],
            ])
            .'</div>'
        ,
        "yii" => <<<EY1
use yii\bootstrap\Dropdown;
//包含一个有.dropdown类的父类
echo '<div class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>';
echo Dropdown::widget([
    'items' => [
        '<li class="dropdown-header">Group A</li>',
        ['label' => 'DropdownA', 'url' => '#', ],
        ['label' => 'DropdownB', 'url' => '#'],
        ['label' => 'Group B'],
        ['label' => 'DropdownC', 'url' => '#', ],
        ['label' => 'DropdownD', 'url' => '#'],
    ],
]);
echo '</div>';
EY1,
        "bootstrap" => <<<EB1
<div class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="true">
        Label <b class="caret"></b>
    </a>
    <ul id="w1" class="dropdown-menu">
        <li class="dropdown-header">
            Group A
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownA
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownB
            </a>
        </li>
        <li class="dropdown-header">
            Group B
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownC
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownD
            </a>
        </li>
    </ul>
</div>
EB1

    ],
    "markdown2" => <<<EM2
> 注意：分组有两个方法，分别如下：
- `'<li class="dropdown-header">Group A</li>'`当作`items`的一个元素；
- 不设置`url`属性和`items`属性，即没有下层菜单，此时也会被设置为组，如：`['label' => 'Group B']`。  


## 分割线
如果不需要组名，那也可以添加分割线来分组，示例如下：
EM2
    ,
    "example2" => [
        "html" =>
            '<div class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>'.
            Dropdown::widget([
                'items' => [
                    ['label' => 'DropdownA', 'url' => '#', ],
                    ['label' => 'DropdownB', 'url' => '#'],
                    '<li role="presentation" class="divider"></li>',
                    ['label' => 'DropdownC', 'url' => '#', ],
                    ['label' => 'DropdownD', 'url' => '#'],
                ],
            ])
            .'</div>'
        ,
        "yii" => <<<EY1
use yii\bootstrap\Dropdown;
//包含一个有.dropdown类的父类
echo '<div class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>';
echo Dropdown::widget([
    'items' => [
        ['label' => 'DropdownA', 'url' => '#', ],
        ['label' => 'DropdownB', 'url' => '#'],
        '<li role="presentation" class="divider"></li>',
        ['label' => 'DropdownC', 'url' => '#', ],
        ['label' => 'DropdownD', 'url' => '#'],
    ],
]);
echo '</div>';
EY1,
        "bootstrap" => <<<EB1
<div class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="true">
        Label <b class="caret"></b>
    </a>
    <ul id="w1" class="dropdown-menu">
        <li>
            <a href="#" tabindex="-1">
                DropdownA
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownB
            </a>
        </li>
        <li role="presentation" class="divider"></li>
        <li>
            <a href="#" tabindex="-1">
                DropdownC
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownD
            </a>
        </li>
    </ul>
</div>
EB1

    ],
    "markdown4" => <<<EM2
## 禁用菜单
如果要禁用某个选项，只需要加上`.disabled`类即可，举例如下：
EM2
    ,
    "example3" => [
        "html" =>
            '<div class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>'.
            Dropdown::widget([
                'items' => [
                    ['label' => 'DropdownA', 'url' => 'javascript:void(0);', 'options' => ['class' => 'disabled']],
                    ['label' => 'DropdownB', 'url' => '#'],
                ],
            ])
            .'</div>'
        ,
        "yii" => <<<EY1
use yii\bootstrap\Dropdown;
//包含一个有.dropdown类的父类
echo '<div class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>';
echo Dropdown::widget([
    'items' => [
        [
            'label' => 'DropdownA', 
            'url' => '#', 
            //禁用此菜单
            'options' => ['class' => 'disabled']
        ],
        [
            'label' => 'DropdownB', 
            'url' => '#'
        ],
    ],
]);
echo '</div>';
EY1,
        "bootstrap" => <<<EB1
<div class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="true">
        Label <b class="caret"></b>
    </a>
    <ul id="w1" class="dropdown-menu">
        <li class="disabled">
            <a href="#" tabindex="-1">
                DropdownA
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownB
            </a>
        </li>
    </ul>
</div>
EB1

    ],
    "markdown3" => <<<M3
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210916171318.png)
### 属性
- `items`: array  
下拉框的列表项，每个子元素都可以有如下属性：  
```php
\$items = [
    ['label' => 'DropdownA', 'url' => '#', ], //链接
    ['label' => 'Group B'], //分组
    ['label' => 'DropdownC', 'url' => '#', 'class' => 'disabled'], //禁用
    '<li role="presentation" class="divider"></li>', //分割线
    ['label' => 'DropdownD', 'url' => '#'],
]
```

- `encodeLabels`: bool  
如果`label`传入了`html`标签，是否需要转换。
- `submenuOptions`: array/null  
这是子菜单的属性列表，可以对下层菜单进行样式设置。
M3
];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}